<template>
  <!-- 商品列表 -->
  <div>
    <div v-if="shows == 'list'">
      <Header>
        <el-button size="small" type="primary" @click="addShop">
          添加商品
        </el-button>
        <el-button size="small" plain @click="dels">批量删除</el-button>
        <div class="heads-right">
          <el-input v-model="goodsName" placeholder="请输入名称" size="small">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getList"
            ></el-button>
          </el-input>
        </div>
      </Header>
      <Main
        :footer-lock="totals > 10"
        :data="listData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="30" type="selection"> </el-table-column>
        <el-table-column
          label="商品名称"
          align="center"
          property="goods_name"
        ></el-table-column>
        <el-table-column
          label="商品分类"
          align="center"
          property="type_name"
        ></el-table-column>
        <el-table-column label="商品封面" align="center">
          <template slot-scope="scope">
            <img
              :src="Url + scope.row.goods_cover[0] + $store.state.imgRotate"
              class="coverList"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="库存数量"
          align="center"
          property="goods_stock"
        ></el-table-column>
        <el-table-column label="录入时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.time }}
          </template>
        </el-table-column>
        <el-table-column label="价格（元）" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
              >￥{{ scope.row.low_goods_price }}</span
            >
            <span v-else
              >￥{{ scope.row.low_goods_price }} - ￥{{
                scope.row.up_goods_price
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            {{ scope.row.sort }} &nbsp;&nbsp;
            <i
              class="el-icon-edit"
              style="cursor:pointer;"
              @click="editSort(scope.row.goods_id)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="上架状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.status ? "上架" : "下架" }} &nbsp;&nbsp;
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#909399"
              @change="switchChang(scope.row.goods_id, scope.row.status)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.is_recommend == 1"
              @click="shopRecommond(scope.row.goods_id, 1)"
            >
              设为推荐
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.is_recommend == 0"
              @click="shopRecommond(scope.row.goods_id, 0)"
            >
              设为不推荐
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="setItem(scope.row.goods_id)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="delFrame(scope.row.goods_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <Form v-if="shows == 'add'" :goods-id="goodsIds" @out="out" />
  </div>
</template>
<script>
import {
  UPALLShop,
  DOWNALLShop,
  DELALLShop,
  GOODSLISTShop,
  RECOMMENDGOODSShop,
  SETSORT
} from "../service";

export default {
  components: {
    Form: () => import("./form")
  },
  // filters: {
  //   time: function(value) {
  //     if (!value) return "";
  //     const index = value.indexOf(":");
  //     return value.substring(0, index - 2);
  //   }
  // },
  data() {
    return {
      shows: "list",
      listData: [],
      Url: this.$store.state.qiniu,
      isArr: [],
      delArr: [],
      totals: 0,
      pages: 1,
      application: this.$store.state.group_name,
      goodsIds: "",
      goodsName: ""
    };
  },
  created() {
    if (this.$route.params.val) {
      this.addShop();
    } else {
      this.getList();
    }
  },
  methods: {
    // 商城and餐饮
    setItem(goodsId) {
      this.goodsIds = goodsId;
      this.shows = "add";
    },
    async switchChang(goodsId, status) {
      if (status) {
        await UPALLShop({ goods_id_arr: goodsId }).then(res => {
          let { code, msg } = res;
          if (code === 200) {
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      } else {
        await DOWNALLShop({ goods_id_arr: goodsId }).then(res => {
          let { code, msg } = res;
          if (code === 200) {
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      }
    },

    async delFrame(goodsId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DELALLShop({ goods_id_arr: goodsId }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    async getList() {
      await GOODSLISTShop({
        page: this.pages,
        pageshow: 10,
        flag: "all",
        goods_name: this.goodsName
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          data.list.forEach(ele => {
            ele.goods_cover = ele.goods_cover.split(",");
            ele.status = ele.status === "normal";
          });
          this.listData = data.list;
          this.totals = data.length;
        } else {
          this.$message.error(msg);
          this.listData = [];
          this.totals = 0;
        }
      });
    },
    async shopRecommond(goodsId, recommend) {
      await RECOMMENDGOODSShop({ goods_id: goodsId, recommend }).then(res => {
        let { code, msg } = res;
        if (code === 200) {
          this.getList();
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    async editSort(goodsId) {
      await this.$prompt("请输入排序数字", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9]*$/,
        inputErrorMessage: "排序格式不正确，请输入数字"
      }).then(({ value }) => {
        SETSORT({ goods_id: goodsId, sort: value }).then(res => {
          let { code, msg } = res;
          if (code === 200) this.getList();
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      });
    },
    addShop() {
      this.goodsIds = -1;
      this.shows = "add";
    },
    dels() {
      this.delArr = [];
      this.isArr.forEach(e => {
        this.delArr.push(e.goods_id);
      });
      var arr = this.delArr.join(",");
      this.delFrame(arr);
    },
    handleSelectionChange(e) {
      this.isArr = e;
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    out() {
      this.shows = "list";
      this.$store.commit("imgInitPgae", 1);
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.coverList {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
</style>
